<template>
  <div>
    <div>
      <span class="notice-warrap" v-if="choiceNotice">
        <span :class="style.noticeBadge" v-if="isSingle">单选</span>
        <span :class="style.noticeBadge" v-if="!isSingle">多选</span>
      </span>
      {{data.content}}
    </div>
    <div class="options-warrap">
      <button
        class="option"
        v-for="(option,index) in data.options"
        :key="index"
        :class="chosed(data.options[optionSequence[index]].id)?style.optionChosed:''"
        @click="chose(data.options[optionSequence[index]].id)"
      >{{data.options[optionSequence[index]].text}}</button>
    </div>
  </div>
</template>

<script>
import { getSequance } from "@/functions/index.js";
export default {
  name: "ViewMC",
  props: ["data"],
  computed: {
    choiceNotice() {
      return this.$store.state.choiceNotice;
    },
    isSingle() {
      return this.data.answers.length == 1;
    },
    optionSequence() {
      return getSequance(
        this.data.options.length,
        this.$store.state.isOptionRandom
      );
    },
    style() {
      return this.$store.state.style;
    }
  },
  methods: {
    chose(value) {
      if (this.choiceNotice && this.isSingle) {
        this.$store.commit("cleanChoice", this.data.identifier);
        //window.console.log("cleanChoice()");
      }
      let choice = {
        identifier: this.data.identifier,
        value: value
      };
      //window.console.log(choice);
      this.$store.commit("mekeChoice", choice);
    },
    chosed(value) {
      let me = false;
      let rec = this.$store.state.recorder;
      if (!rec) return false;
      for (let i = 0; i < rec.length; i++) {
        if (!rec[i]) break;
        if (rec[i].identifier == this.data.identifier) {
          for (let j = 0; j < rec[i].content.length; j++) {
            if (rec[i].content[j] == value) {
              me = true;
              break;
            }
          }
          break;
        }
      }
      return me;
    }
  }
};
</script>

<style scoped>
.custom {
  margin: auto;
}
.options-warrap {
  width: 100%;
  padding: 1em 1em;
}
.option {
  border: 1px solid #ccc;
  display: block;
  width: 100%;
  text-align: justify;
  margin: 1em 0;
  padding: 0.5em 1em;
  background: transparent;
  border-radius: 0.5em;
  outline: none;
}
.chosed {
  background: #fff;
}
</style>

